<template>
  <div>
    <el-button type="primary" size="small" icon="el-icon-plus" style="margin-bottom: 10px" :disabled="listLoading" @click="openSelectSpot" v-if="projectId">新增点位</el-button>

    <el-table v-loading="listLoading" :data="list" size="small" height="calc(88vh - 500px)" style="min-height: 200px">
      <el-table-column label="点位编码" prop="spotCode" min-width="100" />
      <el-table-column label="点位名称" prop="spotName" show-overflow-tooltip min-width="100" />
      <el-table-column label="负责人" prop="principalNames" show-overflow-tooltip min-width="100" />
      <el-table-column align="center" width="170">
        <el-tooltip slot="header" content="点击数字可编辑" placement="top">
          <div>排序<i class="el-icon-info" style="margin-left: 2px" /></div>
        </el-tooltip>
        <template slot-scope="{ row }">
          <div class="el-input-group el-input-group--prepend el-input-group--append" v-if="row.isEditSeq">
            <div class="el-input-group__prepend el-icon-close pointer" style="padding: 0 8px" @click="cancelEditSeq(row)" />
            <el-input-number size="mini" v-model="row.editedSeq" :min="0" :max="1e8" :precision="0" :controls="false" placeholder="请输入数字" style="width: 100%" />
            <div class="el-input-group__append el-icon-check pointer" style="padding: 0 8px" @click="changeSeq(row)" />
          </div>
          <div style="cursor: pointer" title="点击数字可编辑" v-else @click="enableEditSeq(row)">{{ row.seq }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="80">
        <template slot-scope="{ row }">
          <el-button size="mini" type="text" icon="el-icon-delete" :loading="row.removeLoading" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <SelectSpot ref="SelectSpot" @selected="onSelectSpot" />
  </div>
</template>
<script>
// 编辑计划点位
import { getPlanSpot, saveBatchPlanSpot, delPlanSpot } from '@/api/cq/patrol'
import SelectSpot from './SelectSpot'
export default {
  components: { SelectSpot },
  props: { patrolTypeId: { type: String, default: '' } },
  data() {
    return {
      projectId: '',
      patPlanId: '',
      listLoading: false,
      list: []
    }
  },
  computed: {
    isEdit() {
      return !!this.patPlanId
    }
  },
  methods: {
    reset() {
      this.projectId = ''
      this.patPlanId = ''
      this.listLoading = false
      this.list = []
    },
    init({ projectId, patPlanId }) {
      this.projectId = projectId
      this.patPlanId = patPlanId
      if (patPlanId) this.getList()
    },
    async getList() {
      const opt = { patPlanId: this.patPlanId }
      this.listLoading = true
      const res = await getPlanSpot(opt).catch(() => false)
      this.listLoading = false
      if (res === false) return (this.list = [])

      const data = res.data || []
      data.map(i => {
        i.removeLoading = false
        i.isEditSeq = false
        i.editedSeq = i.seq
      })
      this.list = data
    },
    openSelectSpot() {
      const { patrolTypeId } = this
      if (!patrolTypeId) return this.msgInfo('请选择巡更类型')
      this.$refs.SelectSpot.open({ projectId: this.projectId, patrolTypeId })
    },
    async onSelectSpot(selected) {
      selected.map(i => {
        i.spotId = i.patSpotId
        i.seq = 0
        i.removeLoading = false
        i.isEditSeq = false
        i.editedSeq = i.seq
      })

      const { projectId, patPlanId, list } = this
      const idMap = list.reduce((o, i) => !void (o[i.spotId] = 1) && o, {})
      const list2 = selected.filter(i => !idMap[i.spotId])
      if (!list2.length) return

      if (!this.isEdit) {
        this.list = this.list.concat(list2)
        this.msgInfo(`新增 ${list2.length} 项`)
        return
      }

      const opt = list2.map(i => ({
        projectId,
        patPlanId,
        spotId: i.spotId,
        seq: i.seq || 0
      }))
      const res = await saveBatchPlanSpot(opt).catch(() => false)
      if (res === false) return
      this.msgInfo(`新增 ${list2.length} 项`)
      this.getList()
    },
    enableEditSeq(item) {
      item.isEditSeq = true
      // 取消其他项
      this.list.filter(i => i.spotId !== item.spotId && i.isEditSeq).map(i => this.cancelEditSeq(i))
    },
    cancelEditSeq(item) {
      item.isEditSeq = false
      item.editedSeq = item.seq
    },
    async changeSeq(item) {
      const { projectId, patPlanId } = this
      const seq = item.editedSeq || 0
      item.seq = seq
      item.isEditSeq = false
      if (!this.isEdit) return

      const opt = [
        {
          projectId,
          patPlanId,
          planSpotId: item.planSpotId,
          spotId: item.spotId,
          seq
        }
      ]
      const res = await saveBatchPlanSpot(opt).catch(() => false)
      if (res === false) return
      this.getList()
    },
    async handleDelete(item) {
      if (item.removeLoading) return
      if (this.isEdit && this.list.length === 1) return this.msgInfo('需保留至少一个点位')

      const res1 = await this.$confirm(`确认删除：${item.spotName}？`, '警告', { type: 'warning' }).catch(() => false)
      if (res1 !== 'confirm') return

      if (!this.isEdit) {
        this.list = this.list.filter(i => i.spotId !== item.spotId)
        this.msgSuccess('删除成功')
        return
      }

      item.removeLoading = true
      const res = await delPlanSpot(item.planSpotId).catch(() => false)
      item.removeLoading = false
      if (res === false) return

      this.msgSuccess('删除成功')
      this.getList()
    },
    clearList() {
      this.list = []
    },
    getData() {
      return this.list
    }
  }
}
</script>
